<h2>Sign up for our nresletter to receive news and specials</h2>
<div class="formContainer">
    <form
        action="/process?form=newsletter"
        method="POST"
        role="form"
        class="form-horizontal newsLetterForm"
    >
        <input type="hidden" name="_csrf" value="{{csrf}}">
        <div class="form-group">
            <label for="fieldName" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-4">
                <input type="text" class="col-sm-2 form-control" required id="fieldName" name="name">
            </div>
        </div>
        <div class="form-group">
            <label for="fieldEmail" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="col-sm-2 form-control" required id="emailName" name="email">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-4">
                <button type="submit" class="btn btn-default">
                    Register
                </button>
            </div> 
        </div>
    </form>
</div>

{{#section}}
    <script>
        $(document).ready(function(){
            $('.newsLetterForm').on('submit', function(e){
                e.preventDefault();
                var action = $(this).attr('action');
                var $Container = $(this).closest('.formContainer');
                
                $.ajax({
                    url: action,
                    type: 'POST',
                    success: function(data){
                        if (data.success) {
                            $container.html('<h2>Thank you!</h2>')
                        } else {
                            $container.html('<h2>There was a pronblem</h2>')
                        }
                    },
                    error: function(){
                        $container.html('<h2>There was a pronblem</h2>')
                    }
                })
            })
        })
    </script>
{{/section}}